<template>
  <TemplateTitle titleName="各厂吨水处理成本"></TemplateTitle>
  <div class="chart">
    <div class="standed">
      <p></p>
      <p></p>
      <span>行业内上市企业平均处理成本</span>
    </div>
    <chart-cost
      :chartData="chartDataList"
      xAxisName="depName"
      :option="option"
      :chartType="chartType"
      :twoYAxis="false"
      :unit="unit"
      :orient="'horizontal'"
      ref="fourProcessingCostRef"
    ></chart-cost>
    <div class="legend">
      <div class="legendItem">
        <span class="legendIcon one"></span
        ><span class="legendText">处理成本</span>
      </div>
      <div class="legendItem">
        <span class="legendIcon two"></span
        ><span class="legendText">生产成本</span>
      </div>
      <div class="legendItem">
        <span class="legendIcon three"></span
        ><span class="legendText">人工</span>
      </div>
      <div class="legendItem">
        <span class="legendIcon four"></span
        ><span class="legendText">折旧</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue";

import homeHttp from "@/https/home.js";
import moment from "moment";
import { onMounted, ref, watch, inject, nextTick } from "vue";
import ChartCost from "./charts/ChartCost.vue";

const chartDataList = ref([]);
const option = ref({});
const chartType = ref([
  {
    type: "bar",
    code: "totalCost",
    name: "处理成本",
    linerColor: ["#3da8ea", "#24c7d8"],
  },
  {
    type: "bar",
    code: "fourProductionCost",
    name: "生产成本",
    linerColor: ["#48ca54", "#5dda8a"],
  },
  {
    type: "bar",
    code: "laborCost",
    name: "人工",
    linerColor: ["#2ecaff", "#0afbf4"],
  },
  {
    type: "bar",
    code: "depreciationCost",
    name: "折旧",
    linerColor: ["#fb980a", "#ffe22e"],
  },
]);
const unit = ref(["元/吨水"]);

onMounted(() => {
  queryTotalTonWaterCost(moment().format("YYYY"));
});

const year = inject("currentDataYear");
watch(year, (val) => {
  console.log(val, "val");
  queryTotalTonWaterCost(val);
});
const fourProcessingCostRef = ref(null);
const queryTotalTonWaterCost = (year) => {
  let params = {
    year: year,
  };
  homeHttp.queryTotalTonWaterCost(params).then((res) => {
    if (res.data.code == 200) {
      res.data.data.forEach((item) => {
        if (item.depId == 1) {
          item.depName = "总公司";
          chartDataList.value[0] = item;
        }
        if (item.depId == 2) {
          item.depName = "星沙厂";
          chartDataList.value[1] = item;
        }
        if (item.depId == 4) {
          item.depName = "城北厂";
          chartDataList.value[2] = item;
        }
        if (item.depId == 5) {
          item.depName = "城南厂";
          chartDataList.value[3] = item;
        }
        if (item.depId == 3) {
          item.depName = "城西厂";
          chartDataList.value[4] = item;
        }
      });
      chartDataList.value = res.data.data;
      nextTick(() => {
        fourProcessingCostRef.value.resizeHandler();
      });
    }
  });
};
</script>

<style scoped lang="less">
.chart {
  position: relative;

  .standed {
    position: absolute;
    top: 0;
    right: 0;
    color: #ee114f;
    font-size: 10rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 100;

    p {
      width: 10rem;
      height: 2rem;
      background: #ee114f;
      margin-right: 2rem;
    }
  }
}

.legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 8rem;
  width: 100%;

  .legendItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 4rem;

    .legendIcon {
      display: inline-block;
      width: 16rem;
      height: 12rem;
      border-radius: 4rem;
      margin-right: 4rem;

      &.one {
        background: linear-gradient(to right, #48ca54, #2ecaff, #fb980a);
      }

      &.two {
        background: #48ca54;
      }

      &.three {
        background: #2ecaff;
      }

      &.four {
        background: #fb980a;
      }
    }

    .legendText {
      font-size: 12rem;
      color: #7da0ca;
    }
  }
}
</style>
